<% layout('/layout/default.html', {title: '角色管理', libs: ['validate','zTree','icheck']}){ %>
<div class="main-content">
	<div class="container-fluid">
		<div class="card-header">
			<i class="fa fa-sitemap"></i>${role.isNewRecord?'添加角色':'编辑角色'}
		</div>
		<#form:form id="inputForm" model="${role}" class="form-horizontal" action="${ctx}/sys/role/save" method="post">
		<div class="card-body">
			<#form:hidden path="id"/>
			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="归属机构">
							<span style="color:red;" aria-required="true">*</span> 归属机构:<i class="far fa-question-circle" hidden="hidden"></i></label>
						<div class="col-sm-6">
							<#form:treeselect id="officeId" name="office.id" value="${role.office.id!}" labelName="role.office.name"
							labelValue="${role.office.name!}" title="机构" url="/sys/office/treeData?type=2" cssClass="form-control-sm required" notAllowSelectParent="true" />
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="角色名称">
							<span style="color:red;" aria-required="true">*</span> 角色名称:<i class="far fa-question-circle" hidden="hidden"></i>
						</label>
						<div class="col-sm-6">
							<input id="oldName" name="oldName" type="hidden" value="${role.name}" />
							<#form:input path="name" maxlength="50" class="form-control form-control-sm required "/>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="英文名称">
							<span style="color:red;" aria-required="true">*</span> 英文名称:<i class="far fa-question-circle" hidden="hidden"></i></label>
						<div class="col-sm-6">
							<input id="oldEnname" name="oldEnname" type="hidden" value="${role.enname}" />
							<#form:input path="enname"  maxlength="50" class="form-control form-control-sm required" aria-required="true"/>
							<span class="help-inline"> 工作流用户组标识</span>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="用户类型">
							<span style="color:red;" aria-required="true">*</span> 用户类型: <i class="far fa-question-circle" hidden="hidden"></i>
						</label>
						<div class="col-sm-6">
							<#form:select path="userType" name="label" data="getDictList:sys_user_type"  class="form-control select2bs4" />
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="角色类型">
							<span style="color:red;" aria-required="true">*</span> 角色类型:<i class="far fa-question-circle" hidden="hidden"></i></label>
						<div class="col-sm-6">
							<select id="roleType" name="roleType" class="form-control select2bs4 required" >
								<option value="assignment">任务分配</option>
								<option value="security-role">管理角色</option>
								<option value="user">普通角色</option>
							</select>
							<span class="help-inline" title="activiti有3种预定义的组类型：security-role、assignment、user 如果使用Activiti Explorer，需要security-role才能看到manage页签，需要assignment才能claim任务">
					工作流组用户组类型（任务分配：assignment、管理角色：security-role、普通角色：user）</span>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="是否系统数据">
							<span style="color:red;" aria-required="true">*</span>是否系统数据:<i class="far fa-question-circle" hidden="hidden"></i>
						</label>
						<div class="col-sm-6">
							<#form:select path="sysData" name="label" data="getDictList:yes_no" class="form-control roleType required " />
							<span class="help-inline">“是”代表此数据只有超级管理员能进行修改，“否”则表示拥有角色修改人员的权限都能进行修改</span>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="是否可用">
							<span style="color:red;" aria-required="true">*</span>是否可用:<i class="far fa-question-circle" hidden="hidden"></i>
						</label>
						<div class="col-sm-6">
							<#form:select path="useable" name="label" data="getDictList:yes_no" class="form-control roleType required " />
							<span class="help-inline">“是”代表此数据可用，“否”则表示此数据不可用</span>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="数据范围">
							<span style="color:red;" aria-required="true">*</span>数据范围:<i class="far fa-question-circle" hidden="hidden"></i>
						</label>
						<div class="col-sm-6">
							<#form:select path="dataScope" name="label" data="getDictList:sys_data_scope" class="form-control roleType required " />
							<span class="help-inline">特殊情况下，设置为“按明细设置”，可进行跨机构授权</span>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<div class="form-group row">
						<label class="col-form-label col-lg-2 col-md-2 text-right" title="备注信息"> 备注:</label>
						<div class="col-sm-6">
							<#form:textarea path="remarks" rows="3" cols="32"  class="form-control"></#form:textarea>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<div class="form-group row">
					<label class="col-form-label col-lg-2 col-md-2 text-right" title="角色授权"> 角色授权:</label>
					<div class="col-sm-6">
						<div id="menuTree" class="ztree" style="margin-top:3px;float:left;"></div>
						<#form:hidden path="menuIds"/>
						<div id="officeTree" class="ztree" style="margin-left:100px;margin-top:3px;float:left;"></div>
						<#form:hidden path="officeIds"/>
					</div>
				</div>
			</div>
		</div>

	</div>
	<div class="box-footer">
		<div class="row">
			<div class="offset-md-2 col-md-10">
				<% if (hasPermi('sys:dict:edit')){ %>
				<button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> 保 存</button>
				<% } %>
				<button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="window.parent.closeCurrentTabPage();"><i class="fa fa-reply-all"></i> 关 闭</button>
			</div>
		</div>
	</div>
</#form:form>
</div>
</div>
<% } %>

<script type="text/javascript">
	$(document).ready(function(){
		$("#name").focus();

		$("#inputForm").validate({
			rules: {
				name: {remote: "${ctx}/sys/role/checkName?oldName=${role.name}"},
				enname: {remote: "${ctx}/sys/role/checkEnname?oldEnname=${role.enname}"}
			},
			messages: {
				name: {remote: "角色名已存在"},
				enname: {remote: "英文名已存在"}
			},
			submitHandler: function(form){
				var ids = [], nodes = tree.getCheckedNodes(true);
				for(var i=0; i<nodes.length; i++) {
					ids.push(nodes[i].id);
				}
				$("#menuIds").val(ids);
				var ids2 = [], nodes2 = tree2.getCheckedNodes(true);
				for(var i=0; i<nodes2.length; i++) {
					ids2.push(nodes2[i].id);
				}
				$("#officeIds").val(ids2);

				js.ajaxSubmitForm($(form), function(data){
					js.showMessage(data.message);
					if(data.result == 'true'){
						window.parent.closeCurrentTabPage(window.parent.refreshTab);
					}
				});
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				$("#messageBox").text("输入有误，请先更正。");
				if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
					error.appendTo(element.parent().parent());
				} else {
					error.insertAfter(element);
				}
			}
		});


		var setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false},
			data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
					tree.checkNode(node, !node.checked, true, true);
					return false;
				}}};

		// 用户-菜单

		var zNodes=[
				<% for(menu in menuList) { %>
			{id:"${menu.id}",pId:"${menu.parent.id!'0'}",name:"${menu.name!'权限列表'}"},
		<% }%>
	];
		// 初始化树结构
		var tree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
		// 不选择父节点
		tree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
		// 默认选择节点
		var ids = "${role.menuIds}".split(",");
		for(var i=0; i<ids.length; i++) {
			var node = tree.getNodeByParam("id", ids[i]);
			try{tree.checkNode(node, true, false);}catch(e){}
		}
		// 默认展开全部节点
		//tree.expandAll(true);

		// 用户-机构
		var zNodes2=[
				<% for(office in officeList) { %>
			{id:"${office.id}",pId:"${office.parent.id!'0'}",name:"${office.name}"},
		<% }%>
	];
		// 初始化树结构
		var tree2 = $.fn.zTree.init($("#officeTree"), setting, zNodes2);
		// 不选择父节点
		tree2.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
		// 默认选择节点
		var ids2 = "${role.officeIds}".split(",");
		for(var i=0; i<ids2.length; i++) {
			var node = tree2.getNodeByParam("id", ids2[i]);
			try{tree2.checkNode(node, true, false);}catch(e){}
		}
		// 默认展开全部节点
		tree2.expandAll(true);
		// 刷新（显示/隐藏）机构
		refreshOfficeTree();
		$("#dataScope").change(function(){
			refreshOfficeTree();
		});
	});
	function refreshOfficeTree(){
		if($("#dataScope").val()==9){
			$("#officeTree").show();
		}else{
			$("#officeTree").hide();
		}
	}
</script>